<template>
	<view class="feedback">
		<view class="containter">
			<view class="issue_type">选择问题类型</view>
			<view class="issue">
				<view @click="selects(item)" :class="select.indexOf(item) > -1 ? 'question active' : 'question'  " v-for="(item, index) in opinion" :key="index">{{ item }}</view>
			</view>
		</view>
		<view class="describe">描述一下你的问题</view>
		<view class="img">
			<view class="uploading">上传图片 （{{uploadingImg.length}}/4）</view>
			<view class="containter_img">
				<view class="add" @click="chooseImage">+</view>
				<view class="uploading_img" v-for="(item,index) in uploadingImg" :key='index'>
					<image @click="preview(index)" :src="item" mode="">
						<view @click="removeImage(index)" class="icon iconfont icon-shanchu"></view>
					</image>
				</view>
			</view>
		</view>
		<view class="submit" @click="submit">提交</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			opinion: ['功能问题', '性能问题', '体验问题', '其他'],
			select:[]  ,// 用户选中的问题列表
			uploadingImg:[] // 上传图片的列表
		};
	},
	methods:{
		// 点击选中问题的时候触发
		selects(e){
			// 如果已经存在 select 要去掉 否则加入
			// 先定义一个新的数组 进行查找 如果有和有问题的数组一样就 return 返回 查找下标
			const index = this.select.findIndex(item=>{
				return item == e
			})
			// 判断如果下标大于 -1 就表示已经找到了 找到了就删除
			// 否则就是把数据添加到新数组中
			if(index > -1){
				this.select.splice(index,1)
			}else{
				this.select.push(e)
			}
			// 在结构中判断 使用indexOf 查找元素 如果元素存大于-1 就表示找到了 就添加样式到数组中
		},
		// 上传图片
		async chooseImage(){
			const [error,res] = await uni.chooseImage({count:4})
			// 把获取到的图片拼接到一个数组中  数据返回的也是一个数组 数组和数组拼接需要使用 concat
			// 最多上传 4 图片 判断 如果大于 4 张就提示用户
			if(this.uploadingImg.length > 3){
				uni.showToast({
					title:'最多上传四张图片',
					icon:'none'
				})
			}else{
				this.uploadingImg = this.uploadingImg.concat(res.tempFilePaths)
			}
		},
		// 提交
		submit(){
			// 提示用户 暂时不支持
			uni.showToast({
				title:'暂时不支持该功能',
				icon:'none'
			})
		},
		// 预览图片
		preview(index){
			const current = index
			// 需要把url 遍历出来
			
			const urls = this.uploadingImg.map(v=>{
				return v
			})
			 uni.previewImage({
				 urls,
				 current
			 })
		},
		// 删除当前的图片
		removeImage(index){
		 this.uploadingImg.splice(index,1)
			
		}
	}
};
</script>

<style lang="less">
page {
	background: rgb(247 244 244);
}
.feedback {
	.containter {
		height: 203rpx;
		padding: 20rpx;
		width: 750rpx;
		background-color: #fff;
		.issue_type {
			font-size: 30rpx;
		}
		.issue {
			display: flex;
		    flex-wrap: wrap;
			.question{
				width: 181rpx;
				height: 46rpx;
				border: 1rpx solid #ccc;
				background: #EDEDED ;
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 26rpx;
				border-radius: 23rpx;
				font-size: 20rpx;
			}
			.active{
				color:  #ea4350;
				border:1rpx solid  #ea4350;
				background: #FFE6E6;
			}
		}
	}
	.describe {
		height: 391rpx;
		background-color: #fff;
		margin: 15rpx;
		padding: 15rpx;
		font-size: 26rpx;
		color: #7b7b7b;
	}
	.img {
		height: 216rpx;
		margin: 0 20rpx;
		background: #fff;
		.uploading {
			color: #434343;
			font-size: 26rpx;
			margin: 20rpx;
		}
		.containter_img {
			display: flex;
			
			.add {
				width: 128rpx;
				height: 126rpx;
				display: flex;
				justify-content: center;
				align-items: center;
				border: 1rpx solid #ccc;
				background: #d8d8d8;
				color: #a6a6a6;
				margin: 0 5rpx;
				font-size: 100rpx;
			}
			.uploading_img{
				height: 128rpx;
				position: relative;
				
			}
			.icon{
				position: absolute;
				right: -1rpx;
				top: -13rpx;
				color:#ea4350;
				font-size: 30rpx;
			}
			image {
				width: 125rpx;
				height: 125rpx;
				margin: 0 8rpx;
			}
		}
	}
	.submit {
		height: 70rpx;
		width: 710rpx;
		margin: 0 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ea4350;
		color: #fff;
		border-radius: 35rpx;
		font-size: 30rpx;
	}
}
</style>
